<template>
    <wl-panel title="添加成员" subTitle="" titleIcon="pop_xz">
      <template v-if="footerFlag" slot="panel_footer">
          <el-button @click="editMem" type="primary">保存</el-button>
        </template>
        <template slot="panel_body">
        <wl-form-inner subTitle="账号列表">
        <template slot="inner_body">
          <wl-list class="wl-content-container" :listData="myState" :hidePage="true" setW=800>
            <wl-query :needAdv="false" slot="query"  @doQuery="doQuery">
              <template slot="main">
                  <el-form :model="mainData" class="form-query"  label-width="70px" >
                    <wl-form-item :importance="false" label="成员名称" prop="name"   :itemData="mainData">
                        <wl-input slot="input" slot-scope="col" class="wl-input-item" :rawData="col.columnData" field="name" placeholder="请输入成员名称"></wl-input>
                    </wl-form-item>
                  </el-form>
              </template>
            </wl-query>
            <el-table max-height="400"  slot="table" :row-class-name="rowClassName" :data="myState.data_list" style="width: 100%" border stripe @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="40"></el-table-column>
              <el-table-column prop="id" label="编号"></el-table-column>
              <el-table-column prop="name" label="成员名称"></el-table-column>
              <el-table-column prop="password" label="密码"></el-table-column>
              <el-table-column prop="dept_list" label="部门">
                <template slot-scope="scope">
                  <wl-column field="name" :rawData="scope.row.dept_list"></wl-column>
                </template>
              </el-table-column>
              <el-table-column prop="role_list" label="角色名称">
                <template slot-scope="scope">
                  <wl-column field="name" :rawData="scope.row.role_list"></wl-column>
                </template>
              </el-table-column>
            </el-table>
          </wl-list>
        </template>
        </wl-form-inner>
        <div class="div-btn">
            <div class="div-flex">
              <wl-btn @click="add_next" icon="btn_zk2" label="加入下方"></wl-btn>
              <wl-btn @click="add_up" icon="btn_zk2" angle="180" label="加入上方"></wl-btn>
            </div>
        </div>
        <wl-form-inner subTitle="添加账号">
          <template slot="inner_body">
            <wl-list class="wl-content-container" :listData="selectState" :hidePage="true" setW=800>
              <el-table max-height="400"  slot="table" :row-class-name="rowClassName" :data="selectState.data_list" style="width: 100%" border stripe @selection-change="selectChange">
                <el-table-column type="selection" width="40"></el-table-column>
                <el-table-column prop="id" label="编号"></el-table-column>
                <el-table-column prop="name" label="成员名称"></el-table-column>
                <el-table-column prop="dept_list" label="部门">
                  <template slot-scope="scope">
                    <wl-column field="name" :rawData="scope.row.dept_list"></wl-column>
                  </template>
                </el-table-column>
                <el-table-column prop="role_list" label="角色名称">
                  <template slot-scope="scope">
                    <wl-column field="name" :rawData="scope.row.role_list"></wl-column>
                  </template>
                </el-table-column>
              </el-table>
            </wl-list>
        </template>
      </wl-form-inner>
    </template>
  </wl-panel>
</template>
<script lang="ts" src="./org_acc_panel.ts"></script>
<style scoped>
.page {
  background-color: #fff;
}

.div-btn {
  width: 830px;
  background-color: #fff;
  margin-bottom: 10px;
}

.div-bc {
  width: 806px;
  background-color: #fff;
}

.div-flex {
  margin: 0 auto;
  width: 200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

